/* pages/shopping/shopping.wxss */

.take-order-wrapper {
    position: relative;
    margin-top: -30rpx;

    .shop-tab-box {
        background-color: #f9f9f9;
        width: 100%;
        height: 200rpx;
        border-top-left-radius: 20rpx;
        border-top-right-radius: 20rpx;
        border-bottom: 1rpx solid #e4e4e4;
    }

    .shop-content {
        height: 140rpx;
        padding: 0 26rpx;

        .shop-address {
            .address-img {
                width: 50rpx;
                height: 50rpx;
                margin-right: 10rpx;
            }

            .address-name {
                font-size: 40rpx;
                font-weight: bold;
                max-width: 380rpx;
            }

            .iconfont {
                font-size: 34rpx;
                font-weight: bold;
            }
        }

        .shop-address-info {
            font-size: 24rpx;
            color: #999999;

            text:first-child {
                color: #111111;
            }

            .iconfont {
                font-size: 22rpx;
                font-weight: bold;
                color: inherit !important;
            }
        }
    }

    .take-type-box {
        background-color: #fff;
        border-radius: 20px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding: 4rpx;
        font-size: 28rpx;
        position: relative;

        .take-type-node {
            font-size: inherit;
            width: 90rpx;
            height: 50rpx;
            line-height: 50rpx;
            text-align: center;
            z-index: 100;
        }

        .take-type-bg {
            position: absolute;
            background-color: var(--primary-color);
            width: 90rpx;
            height: 50rpx;
            border-radius: 20px;
            box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
            z-index: 0;
            transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
        }

        .is-checked {
            color: #fff !important;
            font-weight: bold;

            &.take-type-bg {
                transform: translateX(90rpx);
            }
        }
    }

    .tab-bar {
        padding: 0 26rpx;

        .tabs-box {
            width: 100%;

            .tab-item {
                height: 60rpx;
                color: #999;
                font-size: 30rpx;
                margin-right: 30rpx;
                position: relative;
            }

            .tab-item-actived {
                color: #222;
                font-weight: bold;

                &::after {
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    transition: .3s;
                    content: "";
                    width: 50rpx;
                    height: 8rpx;
                    background-color: var(--primary-color);
                    border-radius: 30rpx;
                }
            }
        }
    }
}

.shopping-cart {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));

    .shopping-cart-wrapper {
        background-color: var(--primary-color);
        margin: 0 30rpx;
        color: #fff;
        height: 100rpx;
        align-items: center;
        border-radius: 20rpx;
    }

    .cart-img-view {
        position: relative;
        top: -20rpx;
        margin: 0 40rpx;
        width: 100rpx;
        height: 100rpx;
        background-color: #f9f9f9;
        border-radius: 50%;
        border: 12rpx solid var(--primary-color);

        .cart-img {
            width: 66rpx;
            height: 66rpx;
        }

        .total-num {
            position: absolute;
            top: -4rpx;
            right: -6rpx;
            background-color: #242121;
            min-width: 38rpx;
            text-align: center;
            border-radius: 16rpx;
            height: 26rpx;
            line-height: 26rpx;
            font-size: 20rpx;
            font-weight: bold;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
        }
    }

    .center-content-box {
        height: 100%;

        .total-amount {
            font-size: 48rpx;
            font-weight: bold;
        }
    }

    .right-opt {
        height: 100%;
        padding: 0 26rpx;
        justify-content: center;

        .chinese-text {
            font-weight: bold;
            font-size: 36rpx;
        }

        .english-text {
            font-size: 26rpx;
        }
    }


}

/* 底部购物车明细弹窗 */
.cart-popup-wrapper {
    padding-bottom: 160rpx;

    .cart-title-box {
        background-color: inherit;
        width: 100%;
        height: 50px;
        // 清空购物车
        .clearall-cart-view {
            height: 100%;
            width: 180rpx;
            margin-left: 16px;
            color: #969799;
            font-size: 26rpx;

            .iconfont {
                font-size: 33rpx;
                line-height: 33rpx;
            }
        }
    }
    .cart-item {
        margin: 0 20rpx;
        padding: 20rpx 0;
        border-bottom: 1px solid #f9f9f9;
        .cart-item-left {
            .cart-item-img {
                width: 140rpx;
                height: 110rpx;
            }
        }
        .cart-item-right {
            margin-left: 16rpx;
            .item-content {
                &>text {
                    display: block;
                }
                .item-name {
                    font-size: 26rpx;
                    color: #222222;
                    font-weight: 500;
                }
                .item-unit {
                    font-size: 20rpx;
                    color: #999;
                }
            }
            .item-price-num {
                .item-price {
                    .sale-price {
                        color: red;
                        align-items: flex-end;
                        .sale-price-symbol {
                            font-size: 24rpx;
                            line-height: 28rpx;
                        }
                        .sale-price-value {
                            font-weight: 500;
                            font-size: 40rpx;
                            line-height: 36rpx;
                        }
                    }
                    .original-price {
                        margin-left: 8rpx;
                        color: #828282;
                        text-decoration: line-through;
                        font-size: 23rpx;
                    }
                }
            }
        }
    }
}